<template>

    <div id="login">
        <div class="login-box">
            <div class="login-header">
                <el-row :gutter="24" type="flex">
                    <el-col :span="14" :offset="1"><span class="title">订餐系统登录</span></el-col>
                    <el-col :span="8" :offset="1">
                        <span>还没有账号？</span><router-link to="/register"> 去注册</router-link>
                    </el-col>
                </el-row>
            </div>
            <div class="login-info">
                <el-row>
                    <el-col>
                        <el-input id="name"  v-model="userInfo.email" placeholder="请输入帐号">
                            <template slot="prepend">帐号</template>
                        </el-input>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-input id="password" v-model="userInfo.password" type="password" placeholder="请输入密码">
                            <template slot="prepend">密码</template>
                        </el-input>
                    </el-col>
                </el-row>
                <el-row type="flex">
                    <el-col>
                        <el-checkbox v-model="remember">记住密码</el-checkbox>
                    </el-col>
                    <el-col :offset="14">
                        <router-link to="/resetPassword">忘记密码?</router-link>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-button @click="doLogin" style="width:100%" type="primary" :loading="btn_loading">登录</el-button>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    export default {
        name: 'login',
        data () {
            return {
                userInfo: {
                    email : '',
                    password : '',
                },
                remember:false,
                btn_loading: false,
            }
        },
        created () {
            if (localStorage.getItem('remember')) {
                let remember = JSON.parse(localStorage.getItem('remember'));
                this.userInfo.email = remember.email;
                this.userInfo.password = remember.password;
                this.remember = true;
            }
        },
        methods : {
            doLogin (){
                if (this.userInfo.email === ''){
                    this.$message.error('用户名不能为空');
                    return false
                }
                if (this.userInfo.password === ''){
                    this.$message.error('密码名不能为空');
                    return false
                }
                this.btn_loading = true;
                axios.post('/api/api/login',this.userInfo)
                    .then(res => {
                        if(res.data.status === 200){
                            sessionStorage.setItem('user',JSON.stringify(res.data.data));
                            //设置默认请求头
                            axios.defaults.headers['token'] = res.data.data.remember_token;

                            if (this.remember) {
                                localStorage.setItem('remember',JSON.stringify({email:this.userInfo.email, password: this.userInfo.password}));
                            } else {
                                localStorage.setItem('remember','');
                            }
                            this.$message.success('登录成功');
                            this.$router.push({path:'/'})
                        }else {
                            this.$message.error(res.data.msg);
                        }
                        this.btn_loading = false;
                    })
                    .catch(err => {
                        this.btn_loading = false;
                        this.$message.error('服务器异常');
                    })
            }
        }
    }
</script>

<style scoped>
    #login {
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: url("/src/assets/bg.jpg");
        background-repeat: no-repeat;
    }
    .el-row {
        margin-bottom: 20px;
    }
    .login-header {
        background-color: #cccccc;
        position: relative;
        top: 0;
        height: 50px;
        border-radius: 4px;
        color: #409EFF;
        line-height: 50px;
    }
    .title {
        font-size: 18px;
        font-weight: 700;
        text-align: center;
    }
    .login-info {
        width: 400px;
        margin: 0 auto;
        height: 300px;
        position: relative;
        top:10%;
        border-radius: 4px
    }
    .login-box {
        margin:0 auto;
        margin-top: 150px;
        height: 350px;
        width: 500px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        position: relative;
        border-radius: 4px;
    }
</style>